<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
			<meta name="viewport" content="width=device-width, 
				user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
		<title>待办事项</title>
		<style>
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			body{
				background: url(images/1551966153546.jpg);
				background-size: 100%;
				display: flex;
  				justify-content: center;
			}
			.asd{
			    width:100%;
			    height:200px;
			    overflow-x:hidden;
			    overflow-y:auto;
			}
			input{
				width: 300px;
				height: 20px;
				border: 1px solid blueviolet;
			}
			.nav{
				margin-top: 50px;
				padding: 10px;
			}
			button{
				color: #fff;
				height: 20px;
				width: 40px;
				background: blueviolet;
				border: 0;
			}
			.asd{
				border: 1px solid #ccc;
				background: #eee;
				border-radius: 2px;
				margin-top: 0px;
				border-top: 0;
				width:340px;
				padding: 10px;
			}
			.asd span{
				display: block;
				width: 300px;
				padding-left: 10px;
				margin-bottom: 10px;
				
				background: rgba(138, 43, 226, 0.1);
				font-size: 24px;
				border-radius: 2px;
				position: relative;
				border: 1px solid #999;
			}
			.asd span a{
				display: block;
				font-size: 18px;
				line-height: 30px;
				width: 250px;
				overflow: hidden;    
				text-overflow: ellipsis;
 				white-space: nowrap;
				font-family: "楷体";
				color: #cc0000;
			}
			.asd span p{
				position: absolute;
				top: 4px;
				cursor: pointer;
				font-size: 18px;
				right: 2px;
			}
			.gq{
				position: fixed;
				top: 5%;
				width: 100%;
				text-align: center;
				left: 50%;
				transform: translate(-50%);
			}
			h3{
				position: fixed;
				display: none;
				width: 40%;
				height: 200px;
				background: #ccc;
				border: 1px solid #999;
				top: 20%;
				left: 50%;
				transform: translate(-50%);
			}
			h3 span{
				display: block;
				text-align: center;
				line-height: 150px;
			}
			h3 p{
				display: inline-block;
				cursor: pointer;
				text-align: center;
				width: 50%;
			}
			.asda{
				overflow: hidden;
				transition: .2s;
				height: 0;
				font-size: 14px;
				color: #fff;
			}
			.asda i{
				margin-right: 10px;
				float: right;
			}
			@media (max-width: 687px) {
				.nav{
					width: 98%;
				}
				.asd{
					width: 100%;
					background: transparent;
					border: 0;
				}
				.asd span{
					width: 98%;
					box-shadow: 1px 2px 5px slateblue;
				}
				.asd span a{
					width: 80%;
					color: #fff;
				}
				.nav input{
					width: 80%;
					padding-left: 10px;
					height: 40px;
				}
				.nav button{
					width: 20%;
					height: 40px;
				}
				.bianji{
					display: inline-block;
					font-size: 12px !important;
					padding-left: 5px;
					color: aquamarine;
					width: 50%;
					overflow: hidden;    
					text-overflow: ellipsis;
	 				/*white-space: nowrap;*/
					border-bottom: 1px solid #fff;
					position: static !important;
				}
			}
		</style>
	</head>
	<body>
		<div class="nav">
			<input class="input" placeholder="请输入要添加的任务" type="text" /><button type="button" class="button">提交</button>
			<div class="asd">
				<span>
					<a title="这个待办事项如果打的内容太多就会超出部分省略号显示，但是依然可以用此划过的方式显示全部的内容。" href="#">这里是任务</a><p class="cs">×</p>
					<div class="asda">
						<p class="bianji" contenteditable="true">你想给点备注</p>
						<i>完成时间：20:00</i>
					</div>
				</span>
			</div>
		</div>
		<!--<h3><span>您确定要删除此提示吗？</span><p class="c1">确定</p><p class="c2">取消</p></h3>-->
		<script>
			var ipt = document.querySelector(".input"); 
			var btn = document.querySelector(".button"); 
			var span = document.querySelector("span"); 
			var ad = document.querySelector(".asd")
			var spantwo = document.querySelector("span a"); 
			var spanone = document.querySelector(".cs"); 
			var h3 = document.querySelector("h3")
			var h3one= document.querySelector(".c1")
			var h3two = document.querySelector(".c2")
			btn.addEventListener("click",function(){
				if(ipt.value == ""){
					alert("请输入内容！")
				}else{
					var txt = ipt.value;
					var span=document.createElement("span");
					var a = document.createElement("a");
					var p = document.createElement("p");
					a.innerText = txt;
					a.title = txt;
					p.innerText = "×";
					ad.appendChild(span);
					span.appendChild(a);
					span.appendChild(p);
					a.href="#"					
					ipt.value="";
					p.addEventListener("click",function(){
						span.style.display="none";
					})
				}
			})
			ipt.onkeydown = function(e){
			    if(e.keyCode == 13){
			    	if(ipt.value == ""){
						alert("请输入内容！")
					}else{
						var txt = ipt.value;
						var span=document.createElement("span");
						var a = document.createElement("a");
						var p = document.createElement("p");
						a.innerText = txt;
						a.title = txt;
						p.innerText = "×";
						ad.appendChild(span);
						span.appendChild(a);
						span.appendChild(p);
						a.href="#"
						ipt.value="";
						p.addEventListener("click",function(){
							span.style.display="none";
						})
						a.addEventListener("click",function(){
							alert("<h1>" + a.innerHTML+ "</h1>")
						})
					}
			    }
			}
			spanone.addEventListener("click",function(){
//				h3.style.display="block";
				span.style.display="none";
			})
			var asda = document.querySelector(".asda");
				spantwo.addEventListener("click",function(){
					if(asda.style.height== "18px"){
						asda.style.height= "0px";
					}else{
						asda.style.height= "18px";
					}
				})
//			h3one.addEventListener("click",function(){
//				h3.style.display="none";
//				span.style.display="none";
//			})
//			h3two.addEventListener("click",function(){
//				h3.style.display="none";
//			})
		</script>
		<span class="gq" style="font-size: medium;"><tr>  
		    <td colSpan=2 align=right>  
		       <font color="#cb6f00" style="font-weight: 900;">  
		       	小玖报时：<span id="d"></span>&nbsp;&nbsp;</font>  
				<script language="javascript">  
				    window.setInterval("timer()", 1000);  
				    function timer(){  
				        var currDate = new Date();  
				        document.getElementById("d").innerHTML = currDate.toLocaleString();   
				    }  
				</script>  
		    </td>
		</span>  
		<script src="js/vue.js">
			
		</script>
		<script src="js/script.js"></script>
	</body>
</html>
